<template>
  <view
    class="my-medal"
    :style="`background-image: url(${group_ranking_bg});`"
  >
    <CustomHeader :class="{ headWhite: headWhite }" />
    <scroll-view
      class="my-medal-scroll"
      :style="`height: calc(100vh - ${MBHeight + MBTop}px - 20rpx);`"
      :scroll-y="true"
      @scroll="scrollList"
    >
      <view class="title">
        我的勋章
      </view>
      <view class="scroll-wrap">
        <border-box
          v-for="(n, i) in infoData"
          :key="i"
          :inside-padding="16"
          bd-color="#CB9064"
          bg-color="#FFFBEA"
          class="medal-boeder-box"
        >
          <view class="medal-title">
            {{ n.type_name }}
          </view>
          <view class="medal-wrap">
            <view
              v-for="m in n.items"
              :key="m.id"
              class="medal-item"
              :class="{dis:!m.is_completed}"
              @tap="handelPop(m)"
            >
              <image
                :lazy-load="true"
                class="medal-img"
                :src="m.img_url"
              />
              <view class="medal-index">
                {{ m.level }}
              </view>
            </view>
          </view>
        </border-box>
      </view>
    </scroll-view>
    <AtCurtain
      :is-opened="isOpened"
      :on-close="onClose"
    >
      <view
        class="medal-pop"
        :style="{ 'background-image': `url(${medal_bg})` }"
      >
        <view class="title">
          兑换成就勋章
        </view>
        <image
          :lazy-load="true"
          class="medal-img"
          :src="currentItem.img_url"
          :show-menu-by-longpress="true"
        />
        <view class="name">
          {{ currentItem.name }}
        </view>
        <view class="explain">
          {{ currentItem.explain }}
        </view>
      </view>
    </AtCurtain>
  </view>
</template>

<script>
import "./index.scss";
import Taro from "@tarojs/taro";
import borderBox from "_c/border-box/index";
import CustomHeader from "_c/custom-header/index.vue";
import { group_ranking_bg, petal_img, medal_bg } from "@/libs/image-url";
import globalData from "@/libs/globalData";
import { achievement } from "_api/mine";
import { AtCurtain } from "taro-ui-vue";

export default {
  name: "GroupRanking",
  components: {
    CustomHeader,
    borderBox,
    AtCurtain
  },
  data() {
    return {
      group_ranking_bg,
      petal_img,
      medal_bg,
      MBHeight: 0,
      MBTop: 0,
      headWhite: false,
      infoData: [],
      isOpened: false,
      currentItem: {}
    };
  },
  created() {
    this.MBHeight = globalData.getData("MBHeight");
    this.MBTop = globalData.getData("MBTop");
  },
  onLoad() {
    this.getInfo();
  },
  methods: {
    getInfo() {
      achievement().then(r => {
        this.infoData = r.data;
      });
    },
    scrollList({ detail: { scrollTop } }) {
      this.headWhite = scrollTop > 20;
    },
    onClose() {
      this.isOpened = false;
    },
    handelPop(m) {
      this.currentItem = m;
      this.isOpened = true;
    }
  }
};
</script>
